<#import "../macro/components.ftl" as components/>
<#include "../macro/layout_default.ftl"/>

<@body>
<script src="/misc/app/js/salesman_list.js"></script>
</@body>
<@layout_default>
<div class="box">
    <div class="box-header with-border">
        <span class="pull-right text-muted">共 ${salesmanList.resultTotal} 条记录</span>
        <input type="hidden" id="resultTotal_hidden" value="${salesmanList.resultTotal}" />
        <form class="form-inline" action="/salesman">
            <div class="input-group">
                <div class="input-group-addon">关键词</div>
                <input type="text" class="form-control" style="width: 260px" name="keyword" value="${keyword!}" placeholder="姓名、手机号"/>
            </div>
            <div class="input-group">
                <div class="input-group-addon">状态</div>
                <select class="form-control" name="state">
                    <option value="">全部</option>
                    <option value="1" ${(state?exists && state == 1)?string("selected","")}>正常</option>
                    <option value="2" ${(state?exists && state == 2)?string("selected","")}>注销</option>
                </select>
            </div>

            <button type="submit" class="btn btn-warning"><i class="fa fa-search"></i> 查询</button>
            <button type="button" class="btn btn-default" name="btn_new_salesman" data-toggle="modal" data-target="#md_new_salesman"><i class="fa fa-plus"></i> 新增促销员</button>
            <#--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#md_sync_user_to_qyh"><i class="fa fa-random"></i> 同步至企业号通讯录</button>-->
        </form>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-striped table-hover">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>部门</th>
                <th>职位</th>
                <th>扫码次数</th>
                <th>状态</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <#if (salesmanList.result?size > 0)>
                <#list salesmanList.result as item>
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.departmentName!}</td>
                        <td>${item.position}</td>
                        <td>${item.scanCodeCount}</td>
                        <td><#if item.state==1><span class="text-green">正常</span><#elseif item.state==2><span class="text-yellow">注销</span><#else><span class="text-danger">未知</span></#if></td>
                        <td>${item.remark!}</td>
                        <td>
                            <a href="/salesman/salehistory?salesmanId=${item.id}" class="btn btn-default btn-xs">销售记录</a>
                            <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#md_edit_salesman" data-salesman-id="${item.id}">编辑</button>
                            <button type="button" class="btn btn-default btn-xs" name="btn_delete_salesman" data-salesman-id="${item.id}">删除</button>
                        </td>
                    </tr>
                </#list>
            <#else>
                <tr>
                    <td class="text-center text-muted" colspan="9"><i class="fa fa-info-circle"></i> 没有记录</td>
                </tr>
            </#if>
        </table>
        <table class="table table-striped table-hover">
        	<tr>
        		<td colspan="13" style="text-align:right;background-color:white;">
        			<a href="javascript:void(0);" name="btn_export"><i class="glyphicon glyphicon-save"></i> 数据导出</a>
        		</td>
        	</tr>
        </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer text-center">
        <@components.pagination "/salesman?keyword=${keyword!}&state=${state!}&page=$page",salesmanList.page,salesmanList.pageTotal/>
    </div>
</div>


<!--=========== Modals =============-->
<!-- md_new_salesman -->
<div class="modal" id="md_new_salesman" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-plus"></i> 新增促销员</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="form_new_salesman">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="促销员名称" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 手机号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="手机号" name="phone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="departmentId">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 职位</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="职位" name="position"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" placeholder="备注" name="remark"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 状态</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="state">
                                <option value="1">正常</option>
                                <option value="2">注销</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" name="btn_save_new_salesman">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- md_edit_salesman -->
<div class="modal" id="md_edit_salesman" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-pencil-square-o"></i> 编辑促销员</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="form_edit_salesman">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="促销员名称" name="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 手机号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" disabled placeholder="手机号" name="phone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="departmentId">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 职位</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="职位" name="position"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" placeholder="备注" name="remark"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><strong class="text-red bold">*</strong> 状态</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="state">
                                <option value="1">正常</option>
                                <option value="2">注销</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" name="btn_save_edit_salesman">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- md_sync_user_to_qyh -->
<div class="modal" id="md_sync_user_to_qyh" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-random"></i> 同步至企业号通讯录</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="padding: 10px 0">
                    <div class="col-sm-5 text-right"><i class="fa fa-address-card fa-3x text-aqua" style="line-height: 50px"></i></div>
                    <div class="col-sm-2 text-center"><i class="fa fa-random fa-2x text-yellow" style="line-height: 50px"></i></div>
                    <div class="col-sm-5"><img class="img-circle pull-left" src="/misc/app/img/qyh_logo.png" width="50px" height="50px"/></div>
                </div>

                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <p class="help-block">请选择要同步至企业号的哪个部门</p>
                        <p><select class="form-control" name="slt_departmentList"></select></p>
                    </div>
                    <div class="col-sm-8 col-sm-offset-2 text-center hidden">
                        <p>
                            <button class="btn btn-default btn-lg" id="btn_start_sync_user_to_qyh" style="border-radius: 50px"><i class="fa fa-refresh text-aqua"></i> 开始同步</button>
                        </p>
                    </div>
                    <div class="col-sm-8 col-sm-offset-2 text-center">
                        <div class="progress progress-sm active">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 50%"></div>
                        </div>
                        <p>
                            <button class="btn btn-default btn-lg disabled" style="border-radius: 50px"><i class="fa fa-refresh fa-spin text-aqua"></i> 正在同步，请勿刷新页面</button>
                        </p>
                    </div>
                    <div class="col-sm-8 col-sm-offset-2 text-center hidden">
                        <p>
                            <button class="btn btn-default btn-lg" style="border-radius: 50px" data-dismiss="modal"><i class="fa fa-check text-green"></i> 同步完成，关闭</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</@layout_default>